<template>
  <div class="app-container">
    <QueryForm v-model="form" @search="search" />
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="个人" name="0">
        <ClitentsTable :list="employeeList" ref="staffTable" />
      </el-tab-pane>
      <el-tab-pane label="团队" name="1">
        <ClitentsTable :list="employeeList" ref="staffTable" />
      </el-tab-pane>
      <el-tab-pane label="门店" name="2">
        <ClitentsTable :list="employeeList" ref="staffTable" />
      </el-tab-pane>
    </el-tabs>
    <BasePagination v-model="page.page" :total="totalCount" @change="getCients(activeName)" />
  </div>
</template>
<script>
import {
  getPersonalClients,
  getTeamClients,
  getShoplCients
} from '@/api/statistic'
import QueryForm from './_components/QueryForm.vue'
import ClitentsTable from './_components/ClitentsTable.vue'
export default {
  name: 'ClientsStatistics',
  components: { QueryForm, ClitentsTable },
  data() {
    return {
      form: {
        teamId: '',
        shopId: '',
        name: '',
        startDate: '',
        endDate: '',
        type: 0
      },
      activeName: '0',
      employeeList: [],
      totalCount: 0,
      page: {
        page: 1,
        size: 100
      }
    }
  },
  watch: {
    activeName: {
      handler(type) {
        this.page.page = 1
        this.employeeList = []
        this.getCients(type)
      },
      immediate: true
    }
  },
  methods: {
    async getCients(type) {
      this.showAppLoading()
      const params = {
        paramObject: this.form,
        ...this.page
      }
      const res =
        type === '0'
          ? await getPersonalClients(params)
          : type === '1'
            ? await getTeamClients(params)
            : await getShoplCients(params)
      this.hideAppLoading()
      if (!res.result) return
      this.employeeList = res.data.dataList
      this.totalCount = res.data.totalCount
      this.page.page = res.data.page
    },
    search() {
      this.page.page = 1
      this.employeeList = []
      this.getCients(this.activeName)
    }
  }
}
</script>
